<template>
  <div class="app">
    <h3>罗曼</h3>
    <div class="inp">
      <el-input v-model="input" placeholder="输入关键字" class="ipt" />
      <el-button
        type="primary"
        style="margin-left: 16px"
        @click="drawer = true"
      >
        新增
      </el-button>
    </div>
    <!-- 抽屉组件 -->

    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <el-form
        ref="formRef"
        :model="numberValidateForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="" :rules="[{ required: true }]">
          <el-input autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄" prop="" :rules="[{ required: true }]">
          <el-input autocomplete="off" />
        </el-form-item>
        <el-form-item label="地址" prop="" :rules="[{ required: true }]">
          <el-input autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm(formRef)">Reset</el-button>
          <el-button type="primary" @click="submitForm(formRef)"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-table :data="tableData" style="width: 100%">
      
      <!-- 表格 -->
      <el-table-column label="序号" width="180"> </el-table-column>
      <el-table-column label="姓名"> </el-table-column>
      <el-table-column label="年龄"> </el-table-column>
      <el-table-column label="地址"> </el-table-column>

      <el-table-column label="Operations">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormInstance } from "element-plus";
const input = ref("");
const drawer = ref(false);

const formRef = ref();

const numberValidateForm = reactive({
  age: "",
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
// 重置按钮组件
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const tableData = [
  {
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style scoped>
.inp {
  display: flex;
}

.ipt {
  width: 200px;
}
</style>